import React, { Component } from 'react';
import Taro from '@tarojs/taro';
import {View, Text} from '@tarojs/components'
import {user} from '../../utils/user.service'
import {AppointmentDetail} from '../../utils/server.interface'
import {http} from '../../utils/http'
import {APPOINT_DETAIL, ORDER_REFUND} from '../../constants/api'
import {vcmonitor} from "../../utils/tools";
import {h5Wx} from "../../utils/h5.service";
import GzhAuth from "../../components/gzh-auth/gzh-auth"
import './detail.scss'

export default class Detail extends Component {
  state: {
    detail: AppointmentDetail | false
  } = {
    detail: false
  }

  async UNSAFE_componentWillMount() {
    if (process.env.TARO_ENV === 'h5') {
      await h5Wx.getConfig()
    }
    if (!Taro.getCurrentInstance().router.params.itemId) {
      Taro.showModal({
        title: '错误提示',
        content: '参数错误',
        success: (res) => {
          if (res.confirm) {
            Taro.navigateBack()
          }
        }
      })
    }
  }

  itemId = ''

  async componentDidShow() {
    vcmonitor(this);
    const isLogin = await user.checkLogin()
    if (!isLogin) {
      Taro.showModal({
        title: '提示',
        content: '您还没有登录，将进入到登录页面',
        success: (res) => {
          if (res.confirm) {
            user.jumpLogin()
          }
        }
      })
    }
    this.itemId = Taro.getCurrentInstance().router.params.itemId || ''
    Taro.showLoading({title: '加载中...'})
    const detail = await http.get(APPOINT_DETAIL, {uuid: this.itemId})
    this.setState({detail})
    const timer = setTimeout(() => {
      clearTimeout(timer)
      Taro.hideLoading()
    }, 100);
  }

  back() {
    Taro.navigateBack()
  }

  onCancel() {
    const that = this
    Taro.showModal({
      title: '提示',
      content: '您确定要取消吗?',
      cancelText: '取消',
      confirmText: '确定',
      success: async function (res) {
        const data = await http.HPost(ORDER_REFUND, {oid: that.state.detail.orderId})
        if (data.isOk) {
          const detail = await http.get(APPOINT_DETAIL, {uuid: that.itemId})
          this.setState({detail})
          Taro.showToast({title: '操作成功！'})
        } else {
          Taro.showToast({title: data.msg, icon: "none"})
        }
      }
    })
  }

  render() {
    const {detail} = this.state
    // if(!detail) {
    //     return '数据加载失败'
    // }
    return (
      <View className='appoint-detial'>
        <GzhAuth />
        <View className='content'>
          <View className='items'>
            <View className='label'>商品名称:</View>
            <View className='contents'>{detail.name}</View>
          </View>
          <View className='line'/>
          <View className='items'>
            <View className='label'>预约时间:</View>
            <View className='contents'>{detail.add_date}</View>
          </View>
          {(!!detail.dataRange || !!detail.reserve_date) && <View className='items'>
            <View className='label'>预定时间:</View>
            <View className='contents'>{detail.dataRange ? detail.dataRange : detail.reserve_date}</View>
          </View>}
          {!!detail && !!detail.change_date_remark.reserve_date &&
          <View className='items'>
            <View className='label'>改期日期:</View>
            <View className='contents change-date'>{detail.change_date_remark.reserve_date}</View>
          </View>}
          <View className='items'>
            <View className='label'>预约状态:</View>
            <View className='contents status'>{detail.statusStr}</View>
          </View>
          {detail.dealStatusStr &&
          <View className='items'>
            <View className='label'>审核状态:</View>
            <View className='contents status'>{detail.dealStatusStr}</View>
          </View>
          }
          {detail.fee && detail.fee > 0 &&
          <View className='items'>
            <View className='label'>支付金额:</View>
            <View className='contents'>{detail.fee}</View>
          </View>
          }
          <View className='items'>
            <View className='label'>预约{detail.continuous_type === 2 ? '间数' : '数量'}:</View>
            <View className='contents'>{detail.numStr}</View>
          </View>
          <View className='items'>
            <View className='label'>客人姓名:</View>
            <View className='contents'>{detail.linkman}</View>
          </View>
          <View className='items'>
            <View className='label'>联系电话:</View>
            <View className='contents'>{detail.phone}</View>
          </View>
          {detail.identity_num &&
          <View className='items'>
            <View className='label'>证件信息:</View>
            <View className='contents'>{detail.identity_num}</View>
          </View>
          }
          <View className='items'>
            <View className='label'>预 约 码 :</View>
            <View className='contents'>{detail.tickets}</View>
          </View>
          {!!detail.used_reserve_num && <View className='items'>
            <View className='label'>使用次数：</View>
            <View className='contents'>{detail.used_reserve_num}次</View>
            </View> }
          <View className='items'>
            <View className='label'>预约码剩余次数：</View>
            <View className='contents'>{detail.can_reserve_num}次</View>
          </View>
          <View className='items'>
            <View className='label'>允许取消次数：</View>
            <View className='contents'>{detail.cancel_num}次</View>
          </View>
          <View className='items'>
            <View className='label'>剩余取消次数：</View>
            <View className='contents'>{detail.can_cancel_num}次</View>
          </View>
          {detail.deal_remark && <View className='items'>
            <View className='label'>拒绝原因:</View>
            <View className='contents'>{detail.deal_remark}</View>
          </View>}
          <View className='items'>
            <View className='label'><Text className='remark'>备注</Text>:</View>
            <View className='contents'>{detail.remark || ''}</View>
          </View>
        </View>
        {/* {!detail.isReReserve && <View className='btn-back'>
                <Button className='button' onClick={this.back.bind(this)}>返回</Button>
              </View>} */}
        <View className='btn-gox-wrapper'>
          {detail.isReReserve && <View className='btn-box' onClick={() => Taro.navigateTo({url: `/other/appointment/order?itemId=${detail.appointment_uuid}&orderUUID=${detail.order_uuid}`})}>
            <Text>重新预约</Text>
          </View>}
          {!!detail.is_allow_refund && <View className='btn-box cancel' onClick={this.onCancel.bind(this)}>
            <Text>取消</Text>
          </View>}
        </View>
      </View>
    )
  }
}
